<template>
  <page-frame>
    <div class="package-change-01">
      <div class="toptitle">
        <div class="left">套餐变更-变更申请</div>
        <div class="right">
          <div class="btns">
            <!--
            <el-button @click="submit" class="lightGreenBtn">提交申请</el-button>
             -->
            <el-button @click="back">返回</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="step-show" @click="showStep">
        <img src="../../img/show.png" class="step-show-img" v-show="isShowStep">
        <img src="../../img/hidden.png" class="step-show-img" v-show="!isShowStep">
        {{show}}
      </div>
      <div class="packageChange">
        <div class="stepbar" v-show="isShowStep">
          <stepModify :stepData="stepData"></stepModify>
        </div>
        <div class="Application">
          <div class="panel plan">
            <div class="panel-title">最近一次评估结果</div>
            <div class="panel-content plan-meal">
                <el-row>
                  <el-col :span="8"><div class="lInfro">会员姓名:<el-autocomplete v-model="memberName" style="margin-left: 5px" :fetch-suggestions="querySearchAsync"  size="small" placeholder="搜索会员" @select="handleSelect"></el-autocomplete></div></el-col>
                  <el-col :span="8"><div class="lInfro memberNo">会员编号:<span v-model="memberInfor.memberNo">{{memberInfor.memberNo}}</span></div></el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                  <el-col :span="8"><div class="lInfro">原照护等级:<span v-model="memberInfor.lidName">{{memberInfor.lidName}}</span></div></el-col>
                  <el-col :span="8"><div class="lInfro">床位:<span v-model="memberInfor.bedNo">{{memberInfor.bedNo}}</span></div></el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                  <el-col :span="8"><div class="lInfro">评估人员:<span v-model="assessmentResult.auditUser">{{assessmentResult.auditUser}}</span></div></el-col>
                  <el-col :span="8"><div class="lInfro">评估时间:<span v-model="assessmentResult.auditTime">{{assessmentResult.auditTime}}</span></div></el-col>
                </el-row>
              <el-row style="margin-top: 10px;">
                <el-col :span="8"><div class="lInfro">评估备注:<span v-model="assessmentResult.comment">{{assessmentResult.comment}}</span></div></el-col>
                <el-col :span="8"><div class="lInfro">评估结论:<span v-model="assessmentResult.resultName">{{assessmentResult.resultName}}</span></div></el-col>
              </el-row>
                <div class="tabs-result-assessment">
                  <el-table
                    :data="assessItem"
                    border
                    style="width: 100%">
                    <el-table-column
                      prop="setName"
                      label="评估项目"
                      width="">
                    </el-table-column>
                    <el-table-column
                      prop="resultValue"
                      label="评估分值"
                      width="">
                    </el-table-column>
                    <el-table-column
                      prop="resultName"
                      label="评估等级">
                    </el-table-column>
                  </el-table>
                </div>
                  <el-row style="margin-top: 10px;">
                    <el-col :span="6"><div class="lInfro"><span class="labelTotal">评分总和:</span> <span class="totalScore" v-model="totalScore">{{totalScore}}</span></div></el-col>
                    <el-col :span="6">
                      <div class="lInfro">新照护等级:
                        <el-select placeholder="请选择新照护等级" v-model="newGrade">
                          <el-option
                            v-for="item in careLevelOptions"
                            :label="item.lname"
                            :value="item.lid">
                          </el-option>
                        </el-select>
                      </div>
                    </el-col>
                  </el-row>
                </div>
            </div>
          </div>
        <div>
          <div class="bar"></div>
          <div class="make-plan">
            <planMake :member="memberInfor"  :isChange="true"></planMake>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import stepModify from '../../components/stepbar/modify.vue';
  import planMake from '../../components/assessment/planMake.vue';
  import commonApi from '../../service/member/commonApi';
  import packageChangeApi from '../../service/member/packageChangesApi';
  export default {
    methods: {
      init(){
        this.getAllMember();
        this.getCareLevel();
      },
      /**
       * 加载
       */
      loadTableData(){

      },
      /**
       * 返回
       */
      back(){
        this.$confirm('是否返回上级页面，点击「确认」后将不保存当页内容', '返回', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
          type: 'success',
          message: '返回成功!'
        });
        this.$router.push({name: "packageChanges"});
      }).catch(() => {
          this.$message({
          type: 'info',
          message: '已取消返回'
        });
      });
      },
      /**
       * 提交申请
       */
      submit(){
        this.$confirm('确认提交会员 ' + this.memberName + ' 的套餐变更申请', '套餐变更申请', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '提交成功!'
          });
          this.$router.push({name: "packageChanges"});
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消申请'
          });
        });

      },
      /**
       * 筛选会员
       */
      querySearchAsync(queryString, cb) {
        var members = this.members;
        if(members instanceof Array){
          var results = queryString ? members.filter(this.createStateFilter(queryString)) : members;
          clearTimeout(this.timeout);
          this.timeout = setTimeout(() => {
            cb(results);
          }, 1000);
        };
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.memberName.indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelect(item) {
        this.memberInfor = item;
        console.debug(this.memberInfor);
        this.form.memberId = item.memberId;
        this.form.bedId = item.bedId;
        this.memberId=item.memberId;
        this.getLastedAssessment(1,item.memberId);
      },
      /**
       * 获得评估项目表格数据
       */
      getLastedAssessment(sheetType,memberId){
        packageChangeApi.getLastedAssessment(sheetType,memberId).then(
          (response)=>{
            this.assessItem = response.data.data.setResultInfoDTOList;
            this.assessmentResult=response.data.data.assessmentResultDTO;
            this.assessmentResult.resultName=response.data.data.resultName;
            this.assessmentResult.auditTime=this.assessmentResult.auditTime.substring(0,16);
            this.assessmentResult.comment=this.assessmentResult.comment;
           // for(let i=0;i<this.assessItem.length;i++){
           //   this.totalScore =this.totalScore+this.assessItem[i].resultValue;
          //  }
        this.totalScore=this.assessmentResult.resultValue;
          }
        );
      },
      /**
       * 获得所有会员
       */
      getAllMember(){
        let self = this;
        commonApi.getAllCheckInMemberInfor().then(function (response) {
          self.members = response.body.data;
          for(var i=0;i<self.members.length;i++){
            var  member = self.members[i];
            member.value = member.memberName;
          };
        })
      },
      /**
       * 获得照护等级
       */
      getCareLevel(){
        commonApi.getCareGrade().then(
          (response)=>{
            this.careLevelOptions = response.data.data;
          }
        );
      },
      //显示或者隐藏流程图
      showStep(){
        this.isShowStep =  !this.isShowStep;
        (this.isShowStep == false) ? (this.show = "显示流程图"):(this.show = "隐藏流程图");
      },
    },
    mounted: function () {
      this.init();
    },
    data() {
      return {
        stepData: 1,
        tableData: [],
        totalScore:0,
        memberName:"",
        form: {},
        memberInfor:{},
        members:[],
        assessItem: [],
        assessmentResult:{},
        newGrade:'',
        careLevelOptions:[],
        memberId:'',
        isShowStep:false,
        show:"显示流程图",
      }
    },
    components: {
      stepModify,
      planMake
    },
  }
</script>
<style>

  .packageChange .Application {
    /*width: 70%;*/
    /*margin: 0px auto;*/
    /*padding-left: 30px;*/
  }

  .packageChange .bar {
    /*margin: 35px 0;*/
  }

  .packageChange .verticalBar {
    display: inline-block;
    width: 5px;
    height: 25px;
    vertical-align: middle;
    background-color: #0cb7c6;
  }

  .package-change-01 .Application {
    /*width: 80%;*/
    /*margin: 0 auto;*/
    /*padding-left: 30px;*/
  }

  .package-change-01 .Application .bar {
    margin-bottom: 18px;
    margin-top: 50px;
  }

  .package-change-01 .Application .review .reviewItem {
    height: 36px;
    line-height: 36px;
    width: 100%;
    background-color: #eef1f6;
    margin-bottom: 5px;
  }

  .package-change-01 .Application .tabs-result-assessment{
    margin: 15px 0;
  }

  .package-change-01 .lInfro{
    font-size: 13px;
  }

  .package-change-01 .lInfro span{
    margin-left: 5px;
  }
  .package-change-01 .lInfro .el-select{
    width: 60%!important;
    margin-left: 5px;
  }

  .package-change-01 .lInfro .labelTotal{
    display:inline-block;
    height:36px;
    line-height:36px;
  }

  .package-change-01 .lInfro.memberNo{
    height:36px;
    line-height:36px;
  }

  .package-change-01 .totalScore{
    display:inline-block;
    height:36px;
    width:100px;
    line-height:36px;
  }
</style>


